<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>合同签名</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/pdfh5.css" />
    <meta charset="utf-8">
    <style>
        body,
        html {
            width: 100%;
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #demo {
            display: none;
             height: 90%;
        }


        #canvas-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            /*padding: 0.13rem;*/
        }

        #clear_btn {
            width: 30%;
            background: #ca4341;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }

        #save_btn {
            width: 30%;
            background: #4cd964;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }
        #showToastWraper {
          position: fixed;
          z-index: 999;
          top: 35%;
          right: 0;
          left: 0;
          width: 90%;
          margin: auto;
          background: rgba(0, 0, 0, 0.6);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
          text-align: center;
          padding: 10px 20px;
          color: #dcdcdc;
          border-radius: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="text-wrapper">
            <div class="text part1">
                <div>
                    <span class="letter">
                        <div class="character">L</div> <span></span>
                    </span>
                    <span class="letter">
                        <div class="character">o</div> <span></span>
                    </span>
                    <span class="letter">
                        <div class="character">a</div> <span></span>
                    </span>
                    <span class="letter">
                        <div class="character">d</div> <span></span>
                    </span>
                    <span class="letter">
                        <div class="character">i</div> <span></span>
                    </span>
                    <span class="letter">
                        <div class="character">n</div> <span></span>
                    </span>
                    <span class="letter">
                        <div class="character">g</div> <span></span>
                    </span>
                </div>
            </div>
            <div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
        </div>
    </div>
    <div id="demo"></div>
<!--    <canvas id='canvas'></canvas>-->
    <div id="canvas-btn">
        <div id="clear_btn" class="op_btn">返回订单</div>
        <div id="save_btn" onclick="SendMsg()" class="save_btn">签署合同</div>
        <div class="cleaerfix"></div>
    </div>
    <!-- pdf的js -->
    <script src="js/pdf.js"></script>
    <script src="js/pdf.worker.js"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    <!-- 签名的js -->
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/touch.js"></script>
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/flexible_css.debug.js"></script>
    <script type="text/javascript">
        var pdfh5;
        $(function () {
            $("#app").remove()
            $("#demo").show()
            var query = window.location.search.substring(1);
            var url = query.split("=")[1];  //通过路由获取pdf文件线上地址
            console.log('url??',url)
            pdfh5 = new Pdfh5('#demo', {
                //'https://feiyunphoneapp.oss-cn-shenzhen.aliyuncs.com/esign/esignfile/d4060a627c79489b85a4ca362f9870f5.pdf'
                pdfurl: 'https://feiyunphoneapp.oss-cn-shenzhen.aliyuncs.com/esign/esignfile/d4060a627c79489b85a4ca362f9870f5.pdf',
                // pdfurl: url,  //pdf线上地址
                // ,URIenable:true //开启浏览器地址栏file参数获取
            });
            //pdf准备开始渲染，此时可以拿到pdf总页数
            pdfh5.on("ready", function () {
                console.log("pdf准备开始渲染，总页数：" + this.totalNum)
            })
            //监听pdf渲染成功
            pdfh5.on("success", function (time) {
                time = time / 1000
                console.log("pdf渲染完成，总耗时" + time + "秒")
            })

        })
    </script>
    <script>
        //是否已签名
        var isSign = false
        //是否已提交签名
        var haveSign = false
        //获取页面尺寸  
        var canvasWidth = document.body.clientWidth;
        var canvasHeight = canvasWidth;
        //声明canvas
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        //设置canvas尺寸
        canvas.width = canvasWidth * 0.98;
        canvas.height = canvasHeight * 0.45;
        //画笔颜色
        var strokeColor = "#000";
        //鼠标
        isMouseDown = false;
        //上一次绘制的的坐标
        var lastLoc = { x: 0, y: 0 };
        //初始记录事件
        var lastTimestamp = 0;
        //上一次线条宽度
        var lastLineWidth = -1;
        //var   
        var maxV = 10;
        var minV = 0.1;
        var maxLineWidth = 5;
        var minLineWidth = 1;

        //点击色块切换画笔颜色
        $(".colorBtn").on("click", function (e) {
            $(".colorBtn").removeClass('colorBtnBorder');
            $(this).addClass("colorBtnBorder");
            strokeColor = $(this).css("");
        })
        //清除
        $('#clear_btn').on('click', function (e) {
            context.clearRect(0, 0, canvasWidth, canvasHeight);
            isSign = false
        });
        function submitImg (orderId,imgData) {
            $.ajax({
            	url: "http://域名或ip地址/oa/order/qiangmingSaving", //假设这是pdf文件流的请求接口
            	type: "post",
            	data: {
            	    orderId: orderId,
            	    qianming: imgData.substring(22)
            	},
            	success: function (res) {
            		console.log(res)
            		if (res.code==200) {
            		    haveSign = true
            		    showToast('提交签名成功');
            		} else {
            		    showToast('提交签名失败');
            		}
            	}
            });
        }
        // 弹窗提示
        function showToast(text, width, radius) {
          var widthDiv = width ? width : '50%';//自定义宽度
          var radiusDiv = radius ? radius : '50px';//自定义边框角度
          //此处你还可以定义 位置、文字颜色大小、背景色、显示时长等等
    
          var showToastDiv = "<div id='showToastWraper'></div>";
          var showToastWraper = $("#showToastWraper");
          var isExat = showToastWraper.length;
    
          if (!isExat) {
            //第一次创建元素 并且设置元素把显示状态的停止掉、渐隐显示、显示文本内容、设置自定义样式、1.5s后渐隐消失
            $(document.body).append(showToastDiv);
            $("#showToastWraper").stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
          } else {
            //第二次 就不需要创建元素了减少dom操作
            showToastWraper.stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
          }
        }
		
		// 消息推送
        function SendMsg(){
            $.ajax({
                url: "https://test.xxxx.xxxx.com/index.php/WXApi/WXLogin/sendMsg", //
                type: "post",
                // data: {
                //     orderId: orderId,
                //     qianming: imgData.substring(22)
                // },
                success: function (res) {
                    console.log(res)

                    showToast('发送成功');
                    // if (res.code==200) {
                    //     haveSign = true
                    //     showToast('发送成功');
                    // } else {
                    //     showToast('发送失败');
                    // }
                }
            });
        }
         // 将canvas转换成画布
        function canvasToImage(canvas) {
            // var image = new Image();
            // image.src = canvas.toDataURL("image/png");
            // return image;
            return canvas.toDataURL("image/png");
        }
        //获取canvas 坐标 x，y 分别代表相对window内的xy
        function windowToCanvas(x, y) {
            //canvas提供的方法返回canvas 距 他外围包围盒子的距离left,top值
            var bbox = canvas.getBoundingClientRect();
            //返回的就是canvas 内的坐标值
            return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) }
        }
        //封装 事件
        function beginStroke(point) {
            isMouseDown = true;
            //第一次用户画的坐标初始值
            lastLoc = windowToCanvas(point.x, point.y);
            //获取首次点击鼠标 事件戳
            lastTimestamp = new Date().getTime();
        }
        function endStroke() {
            isMouseDown = false;
        }
        function moveStroke(point) {
            //开始绘制直线
            var curLoc = windowToCanvas(point.x, point.y);
            //路程
            var s = calcDistance(curLoc, lastLoc);
            //结束时间
            var curTimestamp = new Date().getTime();
            //时间差
            var t = curTimestamp - lastTimestamp;
            //绘制线条粗细
            var lineWidth = calcLineWidth(t, s);

            //绘制
            context.beginPath();
            context.moveTo(lastLoc.x, lastLoc.y);
            context.lineTo(curLoc.x, curLoc.y);
            context.strokeStyle = strokeColor;
            context.lineWidth = lineWidth;
            context.lineCap = "round";
            context.lineJoin = "round";
            context.stroke();
            //给lastLoc赋值维护
            lastLoc = curLoc;
            //时间更新
            lastTimestamp = curTimestamp;
            lastLineWidth = lineWidth;
        }
        //pc鼠标事件
        canvas.onmousedown = function (e) {
            e.preventDefault();
            beginStroke({ x: e.clientX, y: e.clientY });
        }
        canvas.onmouseup = function (e) {
            e.preventDefault();
            endStroke();
        }
        canvas.onmouseout = function (e) {
            e.preventDefault();
            endStroke();
            isSign = true
        }

        canvas.onmousemove = function (e) {
            e.preventDefault();
            if (isMouseDown) {
                moveStroke({ x: e.clientX, y: e.clientY });
            }
        }
        //移动端
        canvas.addEventListener("touchstart", function (e) {
            e.preventDefault();
            touch = e.touches[0]; //限制一根手指触碰屏幕
            beginStroke({ x: touch.pageX, y: touch.pageY });
        });
        canvas.addEventListener("touchend", function (e) {
            e.preventDefault();
            endStroke();
            isSign = true
        });
        canvas.addEventListener("touchmove", function (e) {
            e.preventDefault();
            if (isMouseDown) {
                touch = e.touches[0];
                moveStroke({ x: touch.pageX, y: touch.pageY });
            }
        });
        //速度 = 路程 / 时间     用来计算书写速度来改变线条粗细
        function calcDistance(loc1, loc2) {
            //返回 数的平方根
            return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y));
        }
        //线条宽度
        function calcLineWidth(t, s) {
            var v = s / t;
            var resultLineWidth;
            if (v <= minV) {
                resultLineWidth = maxLineWidth;
            } else if (v >= maxV) {
                resultLineWidth = minLineWidth;
            } else {
                resultLineWidth = maxLineWidth - (v - minV) / (maxV - minV) * (maxLineWidth - minLineWidth);
            }
            if (lastLineWidth == -1) {
                return resultLineWidth;
            } else {
                return lastLineWidth * 2 / 3 + resultLineWidth * 1 / 3;
            }
        }
    </script>
</body>

</html>